<template>
  <div>
    <!-- 1.页面布局 -->
    <el-card class="box-card">
      <!-- 1.1 头部 -->
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="addVisable = true"
          >添加分类</el-button
        >
      </div>
      <!-- 1.2 表格内容 -->
      <el-table :data="list" style="width: 100%" border>
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column prop="cate_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="obj">
            <el-button type="primary" size="mini" @click="doEdit(obj.row)"
              >修改</el-button
            >
            <el-button type="danger" size="mini" @click="doDelete(obj.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 2.dialog弹框 -->
    <el-dialog
      :title="dialogText.title"
      :visible.sync="addVisable"
      @close="doClose"
    >
      <el-form
        label-position="left"
        label-width="80px"
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
      >
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="addForm.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="addForm.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$refs.addFormRef.resetFields()">取 消</el-button>
        <el-button type="primary" @click="doAdd">{{
          dialogText.btn
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ArtCate",
  //1.数据
  data() {
    return {
      //1.1 分类列表
      list: [],
      //1.2 弹框布尔属性
      addVisable: false,
      //1.3 表单数据
      addForm: {
        cate_name: "",
        cate_alias: ""
      },
      //1.4 表单校验对象
      addFormRules: {
        cate_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            pattern: /^\S{1,10}$/,
            message: "分类名必须是1-10位的非空字符",
            trigger: "blur"
          }
        ],
        cate_alias: [
          { required: true, message: "请输入分类别名", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: "分类别名必须是1-15位的字母数字",
            trigger: "blur"
          }
        ]
      },
      //1.5 dialog对话框文本
      dialogText: {
        title: "新增分类",
        btn: "新增"
      }
    };
  },
  //2.事件方法
  methods: {
    //2.1 请求分类列表
    async initArtCate() {
      //(1)发送ajax
      const { data: res } = await this.$axios.get("/my/cate/list");
      // console.log(res)
      //(2)绑定到data
      this.list = res.data;
    },
    //2.2 添加分类
    doAdd() {
      //(1)验证表单规则
      this.$refs.addFormRef.validate(async valide => {
        //(2)成功就发送ajax
        if (valide) {
          //根据不同按钮发送不同ajax
          let promise = null;
          //如果是编辑就修改请求配置
          if (this.dialogText.btn === "编辑") {
            promise = this.$axios.put("/my/cate/info", this.addForm);
          } else {
            promise = this.$axios.post("/my/cate/add", this.addForm);
          }
          const { data: res } = await promise;

          //(2.1)提示
          this.$message.success(res.message);
          //(2.2)成功： 刷新列表
          if (res.code === 0) {
            //刷新列表
            this.initArtCate();
            //弹窗消失
            this.addVisable = false;
            this.$refs.addFormRef.resetFields();
          }
        }
      });
    },
    //2.3 删除分类
    async doDelete(id) {
      console.log(id);
      //(1)messageBox弹窗
      const confirm = await this.$confirm(
        "此操作将永久删除该分类, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => {});
      //(2)确认删除发送ajax
      if (confirm) {
        //post、put、patch ： 在data传参
        //get : 在params传参
        //delete : 两者都可以,看后台data / params
        const { data: res } = await this.$axios.delete("/my/cate/del", {
          params: { id }
        });
        console.log(res);
        //提示用户
        this.$message.success(res.message);
        //成功刷新列表
        if (res.code === 0) {
          this.initArtCate();
        }
      }
    },
    //2.4 编辑分类
    doEdit(item) {
      console.log(item);
      //(1)修改对话框文本
      this.dialogText = {
        title: "编辑分类",
        btn: "编辑"
      };
      //(2)编辑显示当前编辑内容
      this.addForm = { ...item };

      //弹出对话框
      this.addVisable = true;
    },
    //2.5 对话框消失: 模态框复位
    doClose() {
      this.dialogText = {
        title: "新增分类",
        btn: "新增"
      };
      this.addForm = {
        cate_name: "",
        cate_alias: ""
      };
    }
  },
  //3.created:页面一加载,就ajax请求数据
  created() {
    /* 细节: 一个组件,created钩子加载时候只会执行一次
    (1)如果某个ajax请求,整个页面只需要请求一次 ： 就可以写在created钩子中
    (2)如果某个ajax请求,整个页面需要请求多次 ： 就可以写在methods中, 在created钩子中调用一次即可
    */
    this.initArtCate();
  }
};
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
